<template>
    <transition name="mark_tran">
        <div class="drawer" v-show="isShow">
            <transition name="mark_tran">
                <div class="drawer_mark" v-show="isShow" @click="change(d_data)"></div>
            </transition>
            <transition :name="'drawer_'+d_direct">
                <div :class="'drawer_main '+d_direct" v-show="isShow">
                    <div class="drawer_head display-flex">
                        <div class="drawer_title flex-group-10" style="text-align:left;">{{d_data.title}}</div>
                        <i :class="'bi bi-arrow-'+d_direct+' flex-group-1'" style="cursor:pointer;" @click="change(d_data)"></i>
                    </div>
                    <div class="drawer_body">
                        <!-- 这里是body -->
                        <g-form ref="g_form">
                            <slot name="pop-form-item"></slot>
                            <slot></slot>
                        </g-form>
                    </div>
                    <div class="drawer_foot flex-group-1">
                        <button class="btn default_btn_nobg" @click="change(d_data)">取消</button>
                        <button class="btn primary_btn"  @click="ok(d_data)">保存</button>
                    </div>
                </div>
            </transition>
                
        </div>
    </transition>
    
</template>
<script>
import {ref} from 'vue'
export default {
    name:'g-drawer',
    setup(){
        let isShow = ref(false);
        let g_form = ref(null);
        let d_data = ref({});
        let title = ref('');
        let d_direct = ref('');

        let change = (data)=>{
            d_data.value = data;
            d_direct.value = data.direct;
            
            isShow.value = !isShow.value; 
        }
        let ok = (data)=>{
            data.success(g_form.value.getFormData());            
        }
        return {
            isShow,g_form,d_data,
            title,d_direct,
            change,ok
        }
    }
}
</script>
<style scoped>
    .drawer{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .drawer_mark{
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 9998;
    }
    .drawer_main{
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--default-background);
        border-radius: var(--border-radius-3);
        z-index: 9999;
    }
    .right{
        position: absolute;
        top: 5px;
        bottom: 5px;
        right: 5px;
        width: 500px;
    }
    .left{
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        width: 500px;
    }
    .down{
        position: absolute;
        left: 5px;
        bottom: 5px;
        right: 5px;
        height: 350px;
    }
    .up{
        position: absolute;
        left: 5px;
        top: 5px;
        right: 5px;
        height: 350px;
    }

    .drawer_head{
        text-align: right;
        font-size: 17px;
        line-height: 17px;
        padding: 10px;
        cursor: pointer;
        /* background-color: red; */
    }
    .drawer_body{
        font-size: 13px;
        position: relative;
        padding: 10px;
    }
    .drawer_foot{
        text-align: right;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* ------------mark遮罩层过度----------- */
    .mark_tran-enter-active,
    .mark_tran-leave-active{
        transition: all 0.3s;
    }
    .mark_tran-enter-from,
    .mark_tran-leave-to{
        opacity: 0;
    }
    /* ------------主体body过度 右过度----------- */
    .drawer_right-enter-active,
    .drawer_right-leave-active{
        transition: all 0.3s;
    }
    .drawer_right-enter-from,
    .drawer_right-leave-to{
        opacity: 0;
        transform: translateX(100%);
    }

    /* ------------主体body过度 左过度----------- */
    .drawer_left-enter-active,
    .drawer_left-leave-active{
        transition: all 0.3s;
    }
    .drawer_left-enter-from,
    .drawer_left-leave-to{
        opacity: 0;
        transform: translateX(-100%);
    }
    /* ------------主体body过度 上过度----------- */
    .drawer_up-enter-active,
    .drawer_up-leave-active{
        transition: all 0.3s;
    }
    .drawer_up-enter-from,
    .drawer_up-leave-to{
        opacity: 0;
        transform: translateY(-100%);
    }
    /* ------------主体body过度 下过度----------- */
    .drawer_down-enter-active,
    .drawer_down-leave-active{
        transition: all .3s;
    }
    .drawer_down-enter-from,
    .drawer_down-leave-to{
        opacity: 0;
        transform: translateY(100%);
    }
</style>